<template>
	<div>

		<el-form :inline="true">
			<el-form-item>
				<el-input
						v-model="searchForm.userName"
						placeholder="用户名"
						clearable
				>
				</el-input>
			</el-form-item>

<!--			<el-form-item>-->
<!--				<el-input-->
<!--						v-model="searchForm.tile"-->
<!--						placeholder="标签"-->
<!--						clearable-->
<!--				>-->
<!--				</el-input>-->
<!--			</el-form-item>-->

			<el-form-item>
			<el-date-picker
					v-model="searchForm.time"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
			</el-date-picker>
			</el-form-item>

			<el-form-item>
				<el-button @click="getUserList">搜索</el-button>
			</el-form-item>
			<el-form-item>
			<el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
			</el-form-item>

			<el-form-item>
				<el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
					<el-button type="danger" slot="reference" :disabled="delBtlStatu" v-if="hasAuth('sys:invitation:delete')">批量删除</el-button>
				</el-popconfirm>
			</el-form-item>
		</el-form>


		<el-table
				ref="multipleTable"
				:data="tableData"
				tooltip-effect="dark"
				style="width: 100%"
				border
				stripe
				@selection-change="handleSelectionChange">

			<el-table-column
					type="selection"
					width="55">
			</el-table-column>

			<el-table-column
					align="center"
					prop="exTile"
					label="习题集名称"
					width="300">
			</el-table-column>


			<el-table-column
					align="center"
					prop="userName"
					label="用户名"
					width="200">
			</el-table-column>

			<el-table-column
					align="center"
					prop="checkCount"
					label="得分"
					width="170">
			</el-table-column>

			<el-table-column
					align="center"
					prop="createdAt"
					width="300"
					label="创建时间"
			>
			</el-table-column>

			<el-table-column
					align="center"
					prop="icon"
					width="280px"
					label="操作">

				<template slot-scope="scope">
					<template >
							<el-button type="text"  size="small" :disabled="dialogExVisible" @click="exercise(scope.row)" slot="reference">查看习题集</el-button>
					</template>
<!--					<template>-->
<!--						<el-popconfirm title="这条留言确定删除？" @confirm="delHandle(scope.row.id)">-->
<!--							<el-button type="text" size="small" slot="reference">删除</el-button>-->
<!--						</el-popconfirm>-->
<!--					</template >-->

				</template>
			</el-table-column>

		</el-table>

		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[10, 20, 50, 100]"
				:current-page="current"
				:page-size="size"
				:total="total">
		</el-pagination>


		<el-dialog width="70%" :title="exTile" :visible.sync="dialogExVisible" top="1vh" append-to-body>
			<ex v-if="dialogExVisible" :cpDatas="cpDatas" @clsoer="clsoer" ></ex>
		</el-dialog>

	</div>
</template>

<script>

	import ex from './ExercisesDetail';

	export default {
		name: "Role",
		components: {
			ex
		},
		data() {
			return {
				searchForm: {},
				delBtlStatu: true,

				total: 0,
				size: 10,
				current: 1,
				cpDatas: [],
				exTile: '',
				dialogVisible: false,
				dialogExVisible: false,
				editForm: {

				},

				tableData: [],

				editFormRules: {
					userName: [
						{required: true, message: '请输入用户名称', trigger: 'blur'}
					],
					email: [
						{required: true, message: '请输入邮箱', trigger: 'blur'}
					],
					statu: [
						{required: true, message: '请选择状态', trigger: 'blur'}
					]
				},

				multipleSelection: [],

				roleDialogFormVisible: false,
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				roleForm: {},
				roleTreeData:  [],
				treeCheckedKeys: [],
				checkStrictly: true

			}
		},
		created() {
			this.getUserList()
		},
		methods: {
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				console.log("勾选")
				console.log(val)
				this.multipleSelection = val;

				this.delBtlStatu = val.length == 0
			},

			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val
				this.getUserList()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.current = val
				this.getUserList()
			},

			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.dialogVisible = false
				this.editForm = {}
			},
			handleClose() {
				this.resetForm('editForm')
			},
			exercise(row){
				this.exTile = "用户:"+row.exTile+"的习题集"
				this.cpDatas = row.id
				this.dialogExVisible = true
			},
			clsoer(){
				this.dialogExVisible = false;
				this.getUserList();
			},
			getUserList() {
				console.log(this.searchForm.time)
				this.$axios.get("/example/page", {
					params: {
						userName: this.searchForm.userName,
						begTime: this.searchForm.time!=null?this.searchForm.time[0]:null,
						endTime: this.searchForm.time!=null?this.searchForm.time[1]:null,
						page: this.current,
						size: this.size
					}
				}).then(res => {
					this.tableData = res.data.data.records
					this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
				})
			},
			resetQuery() {
				this.searchForm = {},
				this.getUserList();
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post('/invitation', this.editForm)
							.then(res => {

								this.$message({
									showClose: true,
									message: '恭喜你，操作成功',
									type: 'success',
									onClose:() => {
										this.getUserList()
									}
								});

								this.dialogVisible = false
								this.$refs[formName].resetFields();
								this.editForm = {}
								this.getUserList()
							})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			delHandle(id) {

				var ids = []


				if (id) {
					ids.push(id)
				} else {
					this.multipleSelection.forEach(row => {
						ids.push(row.id)
					})
				}

				console.log(ids)

				this.$axios.post("/invitation/delete", ids).then(res => {
					console.log(res)
					if(res.data.msg == '没有权限删除'){
						this.$message({
							showClose: true,
							message: '没有权限删除',
							type: 'success',
							onClose:() => {
								this.getUserList()
							}
						});
					}else {
						this.$message({
							showClose: true,
							message: '恭喜你，操作成功',
							type: 'success',
							onClose:() => {
								this.getUserList()
							}
						});
					}

				})
			}
		}
	}
</script>

<style scoped>

	.el-pagination {
		float: right;
		margin-top: 22px;
	}

</style>
